<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>类型 | smartAgri</title>
    <meta name="description" content="智慧前端项目文档">
    <link rel="stylesheet" href="/test/assets/style.12fc84cd.css">
    <link rel="modulepreload" href="/test/assets/Home.0acee10a.js">
    <link rel="modulepreload" href="/test/assets/app.8d0a65ca.js">
    <link rel="modulepreload" href="/test/assets/specification_JavaScript.md.eabf491e.lean.js">
    <link rel="modulepreload" href="/test/assets/app.8d0a65ca.js">
    <meta name="author" content="smart-agri Team">
    <meta name="keywords" content="vitejs, vite, ant-design-vue, vue">
    <link rel="icon" type="image/svg+xml" href="/logo.svg">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="keywords" content="vue SmartAgri Admin docs">
    <link rel="icon" href="/zhny.ico">
    <meta name="twitter:title" content="类型 | smartAgri">
    <meta property="og:title" content="类型 | smartAgri">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-c86e40f0><div class="sidebar-button" data-v-c86e40f0><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/test/" aria-label="smartAgri, back to home" data-v-c86e40f0 data-v-dc837cb8><img class="logo" src="/test/logo.jpg" alt="Logo" data-v-dc837cb8> smartAgri</a><div class="flex-grow" data-v-c86e40f0></div><div class="nav" data-v-c86e40f0><nav class="nav-links" data-v-c86e40f0 data-v-0cf770ed><!--[--><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>指南</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/guide/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>指南</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>项目文档汇总</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/project/finical/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>新财务2.0</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/project/erp3/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>ERP3.0重构</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/project/food-safety/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>食安平台</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/project/customer-app/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>客户下单APP</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/project/supplier-app/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>供应商APP</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/project/tally-app/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>麦小菜APP</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>方案合集</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/schemeCollection/scheme/schemeLibrary" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>方案合集</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>公共组件</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/components/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>介绍</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/components/vue3/button" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>vue3组件</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/components/vue3/button" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>vue2组件</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/components/uni-app/waterlist" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>uni-app组件</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>工具函数</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/comprehension/tools/toolsLibrary" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>工具库</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>问题汇总</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/error/component" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>组件问题</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/error/errorList/踩坑合集" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>CSS问题</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/error/mp/uniapp" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>小程序问题</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>规范</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/specification/JavaScript" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>JavaScript规范</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/specification/Vue" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>vue规范</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/specification/GitFenZhi" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>git分支建立和提交规范</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/specification/Others" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>其他大厂前端代码规范</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>相关链接</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://www.tslang.cn/docs/home.html" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>TypeScript</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://www.antdv.com/docs/vue/introduce-cn" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>Antd</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>element</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://developer.mozilla.org/zh-CN/" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>MDN</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://vitejs.cn/" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>Vite</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://v2.cn.vuejs.org/" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>Vue2</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://cn.vuejs.org/guide/introduction.html" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>Vue3</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://www.npmjs.com/" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>npm</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://www.bejson.com/" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>在线JSON校验格式化工具</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!----><!-- <div v-if="repo" class="item">
      <NavLink :item="repo" />
    </div> --></nav></div><div class="nav-icons" data-v-c86e40f0><div class="item" data-v-c86e40f0><button class="nav-btn" aria-label="Toggle Theme" data-v-c86e40f0><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" style="display:none;"><path d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938A7.999 7.999 0 0 0 4 12z" fill="currentColor"></path></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" style=""><path d="M12 18a6 6 0 1 1 0-12a6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8a4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636L5.636 7.05L3.515 4.93zM16.95 18.364l1.414-1.414l2.121 2.121l-1.414 1.414l-2.121-2.121zm2.121-14.85l1.414 1.415l-2.121 2.121l-1.414-1.414l2.121-2.121zM5.636 16.95l1.414 1.414l-2.121 2.121l-1.414-1.414l2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z" fill="currentColor"></path></svg></button></div><!----></div><!--[--><!--]--></header><!--[--><aside class="sidebar" data-v-3e48a26e><nav class="nav-links nav" data-v-3e48a26e data-v-0cf770ed><!--[--><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>指南</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/guide/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>指南</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>项目文档汇总</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/project/finical/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>新财务2.0</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/project/erp3/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>ERP3.0重构</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/project/food-safety/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>食安平台</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/project/customer-app/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>客户下单APP</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/project/supplier-app/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>供应商APP</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/project/tally-app/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>麦小菜APP</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>方案合集</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/schemeCollection/scheme/schemeLibrary" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>方案合集</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>公共组件</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/components/introduction" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>介绍</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/components/vue3/button" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>vue3组件</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/components/vue3/button" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>vue2组件</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/components/uni-app/waterlist" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>uni-app组件</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>工具函数</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/comprehension/tools/toolsLibrary" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>工具库</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>问题汇总</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/error/component" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>组件问题</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/error/errorList/踩坑合集" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>CSS问题</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/error/mp/uniapp" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>小程序问题</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>规范</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/specification/JavaScript" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>JavaScript规范</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/specification/Vue" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>vue规范</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/specification/GitFenZhi" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>git分支建立和提交规范</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item" href="/test/specification/Others" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>其他大厂前端代码规范</span><span class="icon" data-v-d2247c54><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>相关链接</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://www.tslang.cn/docs/home.html" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>TypeScript</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://www.antdv.com/docs/vue/introduce-cn" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>Antd</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>element</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://developer.mozilla.org/zh-CN/" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>MDN</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://vitejs.cn/" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>Vite</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://v2.cn.vuejs.org/" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>Vue2</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://cn.vuejs.org/guide/introduction.html" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>Vue3</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://www.npmjs.com/" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>npm</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-d2247c54><a class="item isExternal" href="https://www.bejson.com/" target="_blank" rel="noopener noreferrer" data-v-d2247c54><span class="arrow" data-v-d2247c54></span><span class="text" data-v-d2247c54>在线JSON校验格式化工具</span><span class="icon" data-v-d2247c54><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-d2247c54><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!----><!-- <div v-if="repo" class="item">
      <NavLink :item="repo" />
    </div> --></nav><!--[--><!--]--><ul class="sidebar-links" data-v-3e48a26e><!--[--><li class="sidebar-link"><p class="sidebar-link-item">规范</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item active" href="/test/specification/JavaScript">JavaScript规范</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#类型">类型</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#引用">引用</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#对象">对象</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#数组">数组</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#解构">解构</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#strings">Strings</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#函数">函数</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#箭头函数">箭头函数</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#构造器">构造器</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#模块">模块</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#iterators-and-generators">Iterators and Generators</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#属性">属性</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#变量">变量</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#hoisting">Hoisting</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#比较运算符和等号">比较运算符和等号</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#代码块">代码块</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#注释">注释</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#空白">空白</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#逗号">逗号</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#分号">分号</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#类型转换">类型转换</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#命名规则">命名规则</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#存取器">存取器</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#事件">事件</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#jquery">jQuery</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#ecmascript-6-规范">ECMAScript 6 规范</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="/test/specification/Vue">vue规范</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/test/specification/GitFenZhi">git分支建立和提交规范</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/test/specification/Others">其他大厂前端代码规范</a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><!-- <Slugs /> --><!--]--><!-- TODO: make this button accessible --><div class="sidebar-mask"></div><main class="page" data-v-4c107763><div class="container" data-v-4c107763><!--[--><!--]--><div class="content" data-v-4c107763><div data-v-4c107763><p><strong>用更合理的方式写 JavaScript</strong></p><p><a name="table-of-contents"></a></p><p><a name="types"></a></p><h2 id="类型"><a class="header-anchor" href="#类型" aria-hidden="true">#</a> 类型</h2><ul><li><p><a href="#1.1">1.1</a> <a name="1.1"></a> <strong>基本类型</strong>: 直接存取基本类型。</p><ul><li><code>字符串</code></li><li><code>数值</code></li><li><code>布尔类型</code></li><li><code>null</code></li><li><code>undefined</code></li></ul><div class="language-javascript"><pre><code><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> bar <span class="token operator">=</span> foo<span class="token punctuation">;</span>

bar <span class="token operator">=</span> <span class="token number">9</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo<span class="token punctuation">,</span> bar<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// =&gt; 1, 9</span>
</code></pre></div></li><li><p><a href="#1.2">1.2</a> <a name="1.2"></a> <strong>复杂类型</strong>: 通过引用的方式存取复杂类型。</p><ul><li><code>对象</code></li><li><code>数组</code></li><li><code>函数</code></li></ul><div class="language-javascript"><pre><code><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> bar <span class="token operator">=</span> foo<span class="token punctuation">;</span>

bar<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">9</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> bar<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// =&gt; 9, 9</span>
</code></pre></div></li></ul><p><a name="references"></a></p><h2 id="引用"><a class="header-anchor" href="#引用" aria-hidden="true">#</a> 引用</h2><ul><li><p><a href="#2.1">2.1</a> <a name="2.1"></a> 对所有的引用使用 <code>const</code> ；不要使用 <code>var</code>。</p><blockquote><p>为什么？这能确保你无法对引用重新赋值，也不会导致出现 bug 或难以理解。</p></blockquote><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> b <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#2.2">2.2</a> <a name="2.2"></a> 如果你一定需要可变动的引用，使用 <code>let</code> 代替 <code>var</code>。</p><blockquote><p>为什么？因为 <code>let</code> 是块级作用域，而 <code>var</code> 是函数作用域。</p></blockquote><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">var</span> count <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  count <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// good, use the let.</span>
<span class="token keyword">let</span> count <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  count <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li><li><p><a href="#2.3">2.3</a> <a name="2.3"></a> 注意 <code>let</code> 和 <code>const</code> 都是块级作用域。</p><div class="language-javascript"><pre><code><span class="token comment">// const 和 let 只存在于它们被定义的区块内。</span>
<span class="token punctuation">{</span>
  <span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> b <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ReferenceError</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ReferenceError</span>
</code></pre></div></li></ul><p><a name="objects"></a></p><h2 id="对象"><a class="header-anchor" href="#对象" aria-hidden="true">#</a> 对象</h2><ul><li><p><a href="#3.1">3.1</a> <a name="3.1"></a> 使用字面值创建对象。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> item <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Object</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> item <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#3.2">3.2</a> <a name="3.2"></a> 如果你的代码在浏览器环境下执行，别使用 <a href="http://es5.github.io/#x7.6.1" target="_blank" rel="noopener noreferrer">保留字</a> 作为键值。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> superman <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token keyword">default</span><span class="token operator">:</span> <span class="token punctuation">{</span> clark<span class="token operator">:</span> <span class="token string">&#39;kent&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">private</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> superman <span class="token operator">=</span> <span class="token punctuation">{</span>
  defaults<span class="token operator">:</span> <span class="token punctuation">{</span> clark<span class="token operator">:</span> <span class="token string">&#39;kent&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  hidden<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#3.3">3.3</a> <a name="3.3"></a> 使用同义词替换需要使用的保留字。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> superman <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;alien&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// bad</span>
<span class="token keyword">const</span> superman <span class="token operator">=</span> <span class="token punctuation">{</span>
  klass<span class="token operator">:</span> <span class="token string">&#39;alien&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> superman <span class="token operator">=</span> <span class="token punctuation">{</span>
  type<span class="token operator">:</span> <span class="token string">&#39;alien&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div></li></ul><p><a name="es6-computed-properties"></a></p><ul><li><p><a href="#3.4">3.4</a> <a name="3.4"></a> 创建有动态属性名的对象时，使用可被计算的属性名称。</p><blockquote><p>为什么？因为这样可以让你在一个地方定义所有的对象属性。</p></blockquote><div class="language-javascript"><pre><code><span class="token keyword">function</span> <span class="token function">getKey</span><span class="token punctuation">(</span><span class="token parameter">k</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">a key named </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>k<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// bad</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  id<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
  name<span class="token operator">:</span> <span class="token string">&#39;San Francisco&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
obj<span class="token punctuation">[</span><span class="token function">getKey</span><span class="token punctuation">(</span><span class="token string">&#39;enabled&#39;</span><span class="token punctuation">)</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  id<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
  name<span class="token operator">:</span> <span class="token string">&#39;San Francisco&#39;</span><span class="token punctuation">,</span>
  <span class="token punctuation">[</span><span class="token function">getKey</span><span class="token punctuation">(</span><span class="token string">&#39;enabled&#39;</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div></li></ul><p><a name="es6-object-shorthand"></a></p><ul><li><p><a href="#3.5">3.5</a> <a name="3.5"></a> 使用对象方法的简写。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> atom <span class="token operator">=</span> <span class="token punctuation">{</span>
  value<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>

  <span class="token function-variable function">addValue</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> atom<span class="token punctuation">.</span>value <span class="token operator">+</span> value<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> atom <span class="token operator">=</span> <span class="token punctuation">{</span>
  value<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>

  <span class="token function">addValue</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> atom<span class="token punctuation">.</span>value <span class="token operator">+</span> value<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div></li></ul><p><a name="es6-object-concise"></a></p><ul><li><p><a href="#3.6">3.6</a> <a name="3.6"></a> 使用对象属性值的简写。</p><blockquote><p>为什么？因为这样更短更有描述性。</p></blockquote><div class="language-javascript"><pre><code><span class="token keyword">const</span> lukeSkywalker <span class="token operator">=</span> <span class="token string">&#39;Luke Skywalker&#39;</span><span class="token punctuation">;</span>

<span class="token comment">// bad</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  lukeSkywalker<span class="token operator">:</span> lukeSkywalker<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  lukeSkywalker<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#3.7">3.7</a> <a name="3.7"></a> 在对象属性声明前把简写的属性分组。</p><blockquote><p>为什么？因为这样能清楚地看出哪些属性使用了简写。</p></blockquote><div class="language-javascript"><pre><code><span class="token keyword">const</span> anakinSkywalker <span class="token operator">=</span> <span class="token string">&#39;Anakin Skywalker&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> lukeSkywalker <span class="token operator">=</span> <span class="token string">&#39;Luke Skywalker&#39;</span><span class="token punctuation">;</span>

<span class="token comment">// bad</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  episodeOne<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  twoJedisWalkIntoACantina<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
  lukeSkywalker<span class="token punctuation">,</span>
  episodeThree<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
  mayTheFourth<span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
  anakinSkywalker<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  lukeSkywalker<span class="token punctuation">,</span>
  anakinSkywalker<span class="token punctuation">,</span>
  episodeOne<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  twoJedisWalkIntoACantina<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
  episodeThree<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
  mayTheFourth<span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div></li></ul><p><a name="arrays"></a></p><h2 id="数组"><a class="header-anchor" href="#数组" aria-hidden="true">#</a> 数组</h2><ul><li><p><a href="#4.1">4.1</a> <a name="4.1"></a> 使用字面值创建数组。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> items <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> items <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#4.2">4.2</a> <a name="4.2"></a> 向数组添加元素时使用 Arrary#push 替代直接赋值。</p><div class="language-javascript"><pre><code><span class="token keyword">const</span> someStack <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>


<span class="token comment">// bad</span>
someStack<span class="token punctuation">[</span>someStack<span class="token punctuation">.</span>length<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">&#39;abracadabra&#39;</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
someStack<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">&#39;abracadabra&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li></ul><p><a name="es6-array-spreads"></a></p><ul><li><p><a href="#4.3">4.3</a> <a name="4.3"></a> 使用拓展运算符 <code>...</code> 复制数组。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> len <span class="token operator">=</span> items<span class="token punctuation">.</span>length<span class="token punctuation">;</span>
<span class="token keyword">const</span> itemsCopy <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> i<span class="token punctuation">;</span>

<span class="token keyword">for</span> <span class="token punctuation">(</span>i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> len<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  itemsCopy<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> items<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> itemsCopy <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>items<span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#4.4">4.4</a> <a name="4.4"></a> 使用 Array#from 把一个类数组对象转换成数组。</p><div class="language-javascript"><pre><code><span class="token keyword">const</span> foo <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">&#39;.foo&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> nodes <span class="token operator">=</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>foo<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li></ul><p><a name="destructuring"></a></p><h2 id="解构"><a class="header-anchor" href="#解构" aria-hidden="true">#</a> 解构</h2><ul><li><p><a href="#5.1">5.1</a> <a name="5.1"></a> 使用解构存取和使用多属性对象。</p><blockquote><p>为什么？因为解构能减少临时引用属性。</p></blockquote><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">function</span> <span class="token function">getFullName</span><span class="token punctuation">(</span><span class="token parameter">user</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> firstName <span class="token operator">=</span> user<span class="token punctuation">.</span>firstName<span class="token punctuation">;</span>
  <span class="token keyword">const</span> lastName <span class="token operator">=</span> user<span class="token punctuation">.</span>lastName<span class="token punctuation">;</span>

  <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>firstName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>lastName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">function</span> <span class="token function">getFullName</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> firstName<span class="token punctuation">,</span> lastName <span class="token punctuation">}</span> <span class="token operator">=</span> obj<span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>firstName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>lastName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// best</span>
<span class="token keyword">function</span> <span class="token function">getFullName</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> firstName<span class="token punctuation">,</span> lastName <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>firstName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>lastName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li><li><p><a href="#5.2">5.2</a> <a name="5.2"></a> 对数组使用解构赋值。</p><div class="language-javascript"><pre><code><span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">// bad</span>
<span class="token keyword">const</span> first <span class="token operator">=</span> arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> second <span class="token operator">=</span> arr<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>first<span class="token punctuation">,</span> second<span class="token punctuation">]</span> <span class="token operator">=</span> arr<span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#5.3">5.3</a> <a name="5.3"></a> 需要回传多个值时，使用对象解构，而不是数组解构。</p><blockquote><p>为什么？增加属性或者改变排序不会改变调用时的位置。</p></blockquote><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">function</span> <span class="token function">processInput</span><span class="token punctuation">(</span><span class="token parameter">input</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// then a miracle occurs</span>
  <span class="token keyword">return</span> <span class="token punctuation">[</span>left<span class="token punctuation">,</span> right<span class="token punctuation">,</span> top<span class="token punctuation">,</span> bottom<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 调用时需要考虑回调数据的顺序。</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>left<span class="token punctuation">,</span> __<span class="token punctuation">,</span> top<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">processInput</span><span class="token punctuation">(</span>input<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">function</span> <span class="token function">processInput</span><span class="token punctuation">(</span><span class="token parameter">input</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// then a miracle occurs</span>
  <span class="token keyword">return</span> <span class="token punctuation">{</span> left<span class="token punctuation">,</span> right<span class="token punctuation">,</span> top<span class="token punctuation">,</span> bottom <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 调用时只选择需要的数据</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> left<span class="token punctuation">,</span> right <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">processInput</span><span class="token punctuation">(</span>input<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li></ul><p><a name="strings"></a></p><h2 id="strings"><a class="header-anchor" href="#strings" aria-hidden="true">#</a> Strings</h2><ul><li><p><a href="#6.1">6.1</a> <a name="6.1"></a> 字符串使用单引号 <code>&#39;&#39;</code> 。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">&quot;Capt. Janeway&quot;</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">&#39;Capt. Janeway&#39;</span><span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#6.2">6.2</a> <a name="6.2"></a> 字符串超过 80 个字节应该使用字符串连接号换行。</p></li><li><p><a href="#6.3">6.3</a> <a name="6.3"></a> 注：过度使用字串连接符号可能会对性能造成影响。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> errorMessage <span class="token operator">=</span> <span class="token string">&#39;This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.&#39;</span><span class="token punctuation">;</span>

<span class="token comment">// bad</span>
<span class="token keyword">const</span> errorMessage <span class="token operator">=</span> <span class="token string">&#39;This is a super long error that was thrown because \
of Batman. When you stop to think about how Batman had anything to do \
with this, you would get nowhere \
fast.&#39;</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> errorMessage <span class="token operator">=</span> <span class="token string">&#39;This is a super long error that was thrown because &#39;</span> <span class="token operator">+</span>
  <span class="token string">&#39;of Batman. When you stop to think about how Batman had anything to do &#39;</span> <span class="token operator">+</span>
  <span class="token string">&#39;with this, you would get nowhere fast.&#39;</span><span class="token punctuation">;</span>
</code></pre></div></li></ul><p><a name="es6-template-literals"></a></p><ul><li><p><a href="#6.4">6.4</a> <a name="6.4"></a> 程序化生成字符串时，使用模板字符串代替字符串连接。</p><blockquote><p>为什么？模板字符串更为简洁，更具可读性。</p></blockquote><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">function</span> <span class="token function">sayHi</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token string">&#39;How are you, &#39;</span> <span class="token operator">+</span> name <span class="token operator">+</span> <span class="token string">&#39;?&#39;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// bad</span>
<span class="token keyword">function</span> <span class="token function">sayHi</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token string">&#39;How are you, &#39;</span><span class="token punctuation">,</span> name<span class="token punctuation">,</span> <span class="token string">&#39;?&#39;</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">function</span> <span class="token function">sayHi</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">How are you, </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">?</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ul><p><a name="functions"></a></p><h2 id="函数"><a class="header-anchor" href="#函数" aria-hidden="true">#</a> 函数</h2><ul><li><p><a href="#7.1">7.1</a> <a name="7.1"></a> 使用函数声明代替函数表达式。</p><blockquote><p>为什么？因为函数声明是可命名的，所以他们在调用栈中更容易被识别。此外，函数声明会把整个函数提升（hoisted），而函数表达式只会把函数的引用变量名提升。这条规则使得<a href="#arrow-functions">箭头函数</a>可以取代函数表达式。</p></blockquote><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> <span class="token function-variable function">foo</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token punctuation">}</span>
</code></pre></div></li><li><p><a href="#7.2">7.2</a> <a name="7.2"></a> 函数表达式:</p><div class="language-javascript"><pre><code><span class="token comment">// 立即调用的函数表达式 (IIFE)</span>
<span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;Welcome to the Internet. Please follow me.&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#7.3">7.3</a> <a name="7.3"></a> 永远不要在一个非函数代码块（<code>if</code>、<code>while</code> 等）中声明一个函数，把那个函数赋给一个变量。浏览器允许你这么做，但它们的解析表现不一致。</p></li><li><p><a href="#7.4">7.4</a> <a name="7.4"></a> <strong>注意:</strong> ECMA-262 把 <code>block</code> 定义为一组语句。函数声明不是语句。<a href="http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf#page=97" target="_blank" rel="noopener noreferrer">阅读 ECMA-262 关于这个问题的说明</a>。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>currentUser<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;Nope.&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">let</span> test<span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>currentUser<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function-variable function">test</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;Yup.&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li><li><p><a href="#7.5">7.5</a> <a name="7.5"></a> 永远不要把参数命名为 <code>arguments</code>。这将取代原来函数作用域内的 <code>arguments</code> 对象。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">function</span> <span class="token function">nope</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> options<span class="token punctuation">,</span> arguments</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...stuff...</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">function</span> <span class="token function">yup</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> options<span class="token punctuation">,</span> args</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...stuff...</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ul><p><a name="es6-rest"></a></p><ul><li><p><a href="#7.6">7.6</a> <a name="7.6"></a> 不要使用 <code>arguments</code>。可以选择 rest 语法 <code>...</code> 替代。</p><blockquote><p>为什么？使用 <code>...</code> 能明确你要传入的参数。另外 rest 参数是一个真正的数组，而 <code>arguments</code> 是一个类数组。</p></blockquote><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">function</span> <span class="token function">concatenateAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> args <span class="token operator">=</span> <span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> args<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">&#39;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">function</span> <span class="token function">concatenateAll</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> args<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">&#39;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ul><p><a name="es6-default-parameters"></a></p><ul><li><p><a href="#7.7">7.7</a> <a name="7.7"></a> 直接给函数的参数指定默认值，不要使用一个变化的函数参数。</p><div class="language-javascript"><pre><code><span class="token comment">// really bad</span>
<span class="token keyword">function</span> <span class="token function">handleThings</span><span class="token punctuation">(</span><span class="token parameter">opts</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 不！我们不应该改变函数参数。</span>
  <span class="token comment">// 更加糟糕: 如果参数 opts 是 false 的话，它就会被设定为一个对象。</span>
  <span class="token comment">// 但这样的写法会造成一些 Bugs。</span>
  <span class="token comment">//（译注：例如当 opts 被赋值为空字符串，opts 仍然会被下一行代码设定为一个空对象。）</span>
  opts <span class="token operator">=</span> opts <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>

<span class="token comment">// still bad</span>
<span class="token keyword">function</span> <span class="token function">handleThings</span><span class="token punctuation">(</span><span class="token parameter">opts</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>opts <span class="token operator">===</span> <span class="token keyword">void</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    opts <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">function</span> <span class="token function">handleThings</span><span class="token punctuation">(</span><span class="token parameter">opts <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>
</code></pre></div></li><li><p><a href="#7.8">7.8</a> <a name="7.8"></a> 直接给函数参数赋值时需要避免副作用。</p></li></ul><blockquote><p>为什么？因为这样的写法让人感到很困惑。</p></blockquote><div class="language-javascript"><pre><code><span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token comment">// bad</span>
<span class="token keyword">function</span> <span class="token function">count</span><span class="token punctuation">(</span><span class="token parameter">a <span class="token operator">=</span> b<span class="token operator">++</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">count</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// 1</span>
<span class="token function">count</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// 2</span>
<span class="token function">count</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 3</span>
<span class="token function">count</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// 3</span>
</code></pre></div><ul><li><a href="#7.8">7.9</a> <a name="7.9"></a> 一个函数只做一件事的好处在于易于理解、易于测试。</li></ul><div class="language-javascript"><pre><code>   <span class="token comment">// bad</span>
  <span class="token keyword">function</span> <span class="token function">emailClients</span><span class="token punctuation">(</span><span class="token parameter">clients</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    clients<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">client</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> clientRecord <span class="token operator">=</span> database<span class="token punctuation">.</span><span class="token function">lookup</span><span class="token punctuation">(</span>client<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token parameter">clientRecord<span class="token punctuation">.</span><span class="token function">isActive</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">email</span><span class="token punctuation">(</span>client<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>


   <span class="token comment">// good</span>
 <span class="token keyword">function</span> <span class="token function">emailActiveClients</span><span class="token punctuation">(</span><span class="token parameter">clients</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  clients<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>isActiveClient<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>email<span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span>
 <span class="token keyword">function</span> <span class="token function">isActiveClient</span><span class="token punctuation">(</span><span class="token parameter">client</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> clientRecord <span class="token operator">=</span> database<span class="token punctuation">.</span><span class="token function">lookup</span><span class="token punctuation">(</span>client<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> clientRecord<span class="token punctuation">.</span><span class="token function">isActive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span>

   

   <span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">-</span>分割线<span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">-</span>

 


 
<span class="token comment">// bad</span>
 <span class="token keyword">function</span> <span class="token function">createFile</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> temp</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token parameter">temp</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    fs<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">./temp/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    fs<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>


<span class="token comment">// good</span>
<span class="token keyword">function</span> <span class="token function">createFile</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  fs<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">createTempFile</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">createFile</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">./temp/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>


</code></pre></div><p><a name="arrow-functions"></a></p><h2 id="箭头函数"><a class="header-anchor" href="#箭头函数" aria-hidden="true">#</a> 箭头函数</h2><ul><li><p><a href="#8.1">8.1</a> <a name="8.1"></a> 当你必须使用函数表达式（或传递一个匿名函数）时，使用箭头函数符号。</p><blockquote><p>为什么？因为箭头函数创造了新的一个 <code>this</code> 执行环境（译注：参考 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions" target="_blank" rel="noopener noreferrer">Arrow functions - JavaScript | MDN</a> 和 <a href="http://toddmotto.com/es6-arrow-functions-syntaxes-and-lexical-scoping/" target="_blank" rel="noopener noreferrer">ES6 arrow functions, syntax and lexical scoping</a>），通常情况下都能满足你的需求，而且这样的写法更为简洁。</p></blockquote><blockquote><p>为什么不？如果你有一个相当复杂的函数，你或许可以把逻辑部分转移到一个函数声明上。</p></blockquote><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> y <span class="token operator">=</span> x <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> x <span class="token operator">*</span> y<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> y <span class="token operator">=</span> x <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> x <span class="token operator">*</span> y<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#8.2">8.2</a> <a name="8.2"></a> 如果一个函数适合用一行写出并且只有一个参数，那就把花括号、圆括号和 <code>return</code> 都省略掉。如果不是，那就不要省略。</p><blockquote><p>为什么？语法糖。在链式调用中可读性很高。</p></blockquote><blockquote><p>为什么不？当你打算回传一个对象的时候。</p></blockquote><div class="language-javascript"><pre><code><span class="token comment">// good</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token operator">=&gt;</span> x <span class="token operator">*</span> x<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">total<span class="token punctuation">,</span> n</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> total <span class="token operator">+</span> n<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li></ul><p><a name="constructors"></a></p><h2 id="构造器"><a class="header-anchor" href="#构造器" aria-hidden="true">#</a> 构造器</h2><ul><li><p><a href="#9.1">9.1</a> <a name="9.1"></a> 总是使用 <code>class</code>。避免直接操作 <code>prototype</code> 。</p><blockquote><p>为什么? 因为 <code>class</code> 语法更为简洁更易读。</p></blockquote><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">function</span> <span class="token function">Queue</span><span class="token punctuation">(</span><span class="token parameter">contents <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>_queue <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>contents<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token class-name">Queue</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">pop</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> value <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_queue<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>_queue<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> value<span class="token punctuation">;</span>
<span class="token punctuation">}</span>


<span class="token comment">// good</span>
<span class="token keyword">class</span> <span class="token class-name">Queue</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">contents <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>_queue <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>contents<span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> value <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_queue<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>_queue<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> value<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div></li><li><p><a href="#9.2">9.2</a> <a name="9.2"></a> 使用 <code>extends</code> 继承。</p><blockquote><p>为什么？因为 <code>extends</code> 是一个内建的原型继承方法并且不会破坏 <code>instanceof</code>。</p></blockquote><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> inherits <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;inherits&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">PeekableQueue</span><span class="token punctuation">(</span><span class="token parameter">contents</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">Queue</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> contents<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">inherits</span><span class="token punctuation">(</span>PeekableQueue<span class="token punctuation">,</span> Queue<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token class-name">PeekableQueue</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">peek</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_queue<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">class</span> <span class="token class-name">PeekableQueue</span> <span class="token keyword">extends</span> <span class="token class-name">Queue</span> <span class="token punctuation">{</span>
  <span class="token function">peek</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_queue<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div></li><li><p><a href="#9.3">9.3</a> <a name="9.3"></a> 方法可以返回 <code>this</code> 来帮助链式调用。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token class-name">Jedi</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">jump</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>jumping <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token class-name">Jedi</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">setHeight</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">height</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>height <span class="token operator">=</span> height<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> luke <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Jedi</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
luke<span class="token punctuation">.</span><span class="token function">jump</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// =&gt; true</span>
luke<span class="token punctuation">.</span><span class="token function">setHeight</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// =&gt; undefined</span>

<span class="token comment">// good</span>
<span class="token keyword">class</span> <span class="token class-name">Jedi</span> <span class="token punctuation">{</span>
  <span class="token function">jump</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>jumping <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">setHeight</span><span class="token punctuation">(</span><span class="token parameter">height</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>height <span class="token operator">=</span> height<span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> luke <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Jedi</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

luke<span class="token punctuation">.</span><span class="token function">jump</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">setHeight</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#9.4">9.4</a> <a name="9.4"></a> 可以写一个自定义的 <code>toString()</code> 方法，但要确保它能正常运行并且不会引起副作用。</p><div class="language-javascript"><pre><code><span class="token keyword">class</span> <span class="token class-name">Jedi</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">options <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> options<span class="token punctuation">.</span>name <span class="token operator">||</span> <span class="token string">&#39;no name&#39;</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Jedi - </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ul><p><a name="modules"></a></p><h2 id="模块"><a class="header-anchor" href="#模块" aria-hidden="true">#</a> 模块</h2><ul><li><p><a href="#10.1">10.1</a> <a name="10.1"></a> 总是使用模组 (<code>import</code>/<code>export</code>) 而不是其他非标准模块系统。你可以编译为你喜欢的模块系统。</p><blockquote><p>为什么？模块就是未来，让我们开始迈向未来吧。</p></blockquote><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> AirbnbStyleGuide <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;./AirbnbStyleGuide&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> AirbnbStyleGuide<span class="token punctuation">.</span>es6<span class="token punctuation">;</span>

<span class="token comment">// ok</span>
<span class="token keyword">import</span> AirbnbStyleGuide <span class="token keyword">from</span> <span class="token string">&#39;./AirbnbStyleGuide&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> AirbnbStyleGuide<span class="token punctuation">.</span>es6<span class="token punctuation">;</span>

<span class="token comment">// best</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> es6 <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;./AirbnbStyleGuide&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> es6<span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#10.2">10.2</a> <a name="10.2"></a> 不要使用通配符 import。</p><blockquote><p>为什么？这样能确保你只有一个默认 export。</p></blockquote><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> AirbnbStyleGuide <span class="token keyword">from</span> <span class="token string">&#39;./AirbnbStyleGuide&#39;</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">import</span> AirbnbStyleGuide <span class="token keyword">from</span> <span class="token string">&#39;./AirbnbStyleGuide&#39;</span><span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#10.3">10.3</a> <a name="10.3"></a>不要从 import 中直接 export。</p><blockquote><p>为什么？虽然一行代码简洁明了，但让 import 和 export 各司其职让事情能保持一致。</p></blockquote><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token comment">// filename es6.js</span>
<span class="token keyword">export</span> <span class="token punctuation">{</span> es6 <span class="token keyword">as</span> <span class="token keyword">default</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;./airbnbStyleGuide&#39;</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token comment">// filename es6.js</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> es6 <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;./AirbnbStyleGuide&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> es6<span class="token punctuation">;</span>
</code></pre></div></li></ul><p><a name="iterators-and-generators"></a></p><h2 id="iterators-and-generators"><a class="header-anchor" href="#iterators-and-generators" aria-hidden="true">#</a> Iterators and Generators</h2><ul><li><p><a href="#11.1">11.1</a> <a name="11.1"></a> 不要使用 iterators。使用高阶函数例如 <code>map()</code> 和 <code>reduce()</code> 替代 <code>for-of</code>。</p><blockquote><p>为什么？这加强了我们不变的规则。处理纯函数的回调值更易读，这比它带来的副作用更重要。</p></blockquote><div class="language-javascript"><pre><code><span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">// bad</span>
<span class="token keyword">let</span> sum <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> num <span class="token keyword">of</span> numbers<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  sum <span class="token operator">+=</span> num<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

sum <span class="token operator">===</span> <span class="token number">15</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">let</span> sum <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
numbers<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">num</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> sum <span class="token operator">+=</span> num<span class="token punctuation">)</span><span class="token punctuation">;</span>
sum <span class="token operator">===</span> <span class="token number">15</span><span class="token punctuation">;</span>

<span class="token comment">// best (use the functional force)</span>
<span class="token keyword">const</span> sum <span class="token operator">=</span> numbers<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">total<span class="token punctuation">,</span> num</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> total <span class="token operator">+</span> num<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
sum <span class="token operator">===</span> <span class="token number">15</span><span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#11.2">11.2</a> <a name="11.2"></a> 现在还不要使用 generators。</p></li></ul><blockquote><p>为什么？因为它们现在还没法很好地编译到 ES5。 (译者注：目前(2016/03) Chrome 和 Node.js 的稳定版本都已支持 generators)</p></blockquote><p><a name="properties"></a></p><h2 id="属性"><a class="header-anchor" href="#属性" aria-hidden="true">#</a> 属性</h2><ul><li><p><a href="#12.1">12.1</a> <a name="12.1"></a> 使用 <code>.</code> 来访问对象的属性。</p><div class="language-javascript"><pre><code><span class="token keyword">const</span> luke <span class="token operator">=</span> <span class="token punctuation">{</span>
  jedi<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  age<span class="token operator">:</span> <span class="token number">28</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// bad</span>
<span class="token keyword">const</span> isJedi <span class="token operator">=</span> luke<span class="token punctuation">[</span><span class="token string">&#39;jedi&#39;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> isJedi <span class="token operator">=</span> luke<span class="token punctuation">.</span>jedi<span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#12.2">12.2</a> <a name="12.2"></a> 当通过变量访问属性时使用中括号 <code>[]</code>。</p><div class="language-javascript"><pre><code><span class="token keyword">const</span> luke <span class="token operator">=</span> <span class="token punctuation">{</span>
  jedi<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  age<span class="token operator">:</span> <span class="token number">28</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">getProp</span><span class="token punctuation">(</span><span class="token parameter">prop</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> luke<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> isJedi <span class="token operator">=</span> <span class="token function">getProp</span><span class="token punctuation">(</span><span class="token string">&#39;jedi&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li></ul><p><a name="variables"></a></p><h2 id="变量"><a class="header-anchor" href="#变量" aria-hidden="true">#</a> 变量</h2><ul><li><p><a href="#13.1">13.1</a> <a name="13.1"></a> 一直使用 <code>const</code> 来声明变量，如果不这样做就会产生全局变量。我们需要避免全局命名空间的污染。<a href="http://www.wikiwand.com/en/Captain_Planet" target="_blank" rel="noopener noreferrer">地球队长</a>已经警告过我们了。（译注：全局，global 亦有全球的意思。地球队长的责任是保卫地球环境，所以他警告我们不要造成「全球」污染。）</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
superPower <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">SuperPower</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> superPower <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">SuperPower</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#13.2">13.2</a> <a name="13.2"></a> 使用 <code>const</code> 声明每一个变量。</p><blockquote><p>为什么？增加新变量将变的更加容易，而且你永远不用再担心调换错 <code>;</code> 跟 <code>,</code>。</p></blockquote><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> items <span class="token operator">=</span> <span class="token function">getItems</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    goSportsTeam <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    dragonball <span class="token operator">=</span> <span class="token string">&#39;z&#39;</span><span class="token punctuation">;</span>

<span class="token comment">// bad</span>
<span class="token comment">// (compare to above, and try to spot the mistake)</span>
<span class="token keyword">const</span> items <span class="token operator">=</span> <span class="token function">getItems</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    goSportsTeam <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
    dragonball <span class="token operator">=</span> <span class="token string">&#39;z&#39;</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> items <span class="token operator">=</span> <span class="token function">getItems</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> goSportsTeam <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> dragonball <span class="token operator">=</span> <span class="token string">&#39;z&#39;</span><span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#13.3">13.3</a> <a name="13.3"></a> 将所有的 <code>const</code> 和 <code>let</code> 分组</p><blockquote><p>为什么？当你需要把已赋值变量赋值给未赋值变量时非常有用。</p></blockquote><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">let</span> i<span class="token punctuation">,</span> len<span class="token punctuation">,</span> dragonball<span class="token punctuation">,</span>
    items <span class="token operator">=</span> <span class="token function">getItems</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    goSportsTeam <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>

<span class="token comment">// bad</span>
<span class="token keyword">let</span> i<span class="token punctuation">;</span>
<span class="token keyword">const</span> items <span class="token operator">=</span> <span class="token function">getItems</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> dragonball<span class="token punctuation">;</span>
<span class="token keyword">const</span> goSportsTeam <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> len<span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> goSportsTeam <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> items <span class="token operator">=</span> <span class="token function">getItems</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> dragonball<span class="token punctuation">;</span>
<span class="token keyword">let</span> i<span class="token punctuation">;</span>
<span class="token keyword">let</span> length<span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#13.4">13.4</a> <a name="13.4"></a> 在你需要的地方给变量赋值，但请把它们放在一个合理的位置。</p><blockquote><p>为什么？<code>let</code> 和 <code>const</code> 是块级作用域而不是函数作用域。</p></blockquote><div class="language-javascript"><pre><code><span class="token comment">// good</span>
<span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;doing stuff..&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">//..other stuff..</span>

  <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">if</span> <span class="token punctuation">(</span>name <span class="token operator">===</span> <span class="token string">&#39;test&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">return</span> name<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// bad - unnecessary function call</span>
<span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">hasName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>hasName<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setFirstName</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">hasName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>hasName<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setFirstName</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ul><p><a name="hoisting"></a></p><h2 id="hoisting"><a class="header-anchor" href="#hoisting" aria-hidden="true">#</a> Hoisting</h2><ul><li><p><a href="#14.1">14.1</a> <a name="14.1"></a> <code>var</code> 声明会被提升至该作用域的顶部，但它们赋值不会提升。<code>let</code> 和 <code>const</code> 被赋予了一种称为「<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let" target="_blank" rel="noopener noreferrer">暂时性死区（Temporal Dead Zones, TDZ）</a>」的概念。这对于了解为什么 <a href="http://es-discourse.com/t/why-typeof-is-no-longer-safe/15" target="_blank" rel="noopener noreferrer">type of 不再安全</a>相当重要。</p><div class="language-javascript"><pre><code><span class="token comment">// 我们知道这样运行不了</span>
<span class="token comment">// （假设 notDefined 不是全局变量）</span>
<span class="token keyword">function</span> <span class="token function">example</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>notDefined<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// =&gt; throws a ReferenceError</span>
<span class="token punctuation">}</span>

<span class="token comment">// 由于变量提升的原因，</span>
<span class="token comment">// 在引用变量后再声明变量是可以运行的。</span>
<span class="token comment">// 注：变量的赋值 `true` 不会被提升。</span>
<span class="token keyword">function</span> <span class="token function">example</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>declaredButNotAssigned<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// =&gt; undefined</span>
  <span class="token keyword">var</span> declaredButNotAssigned <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 编译器会把函数声明提升到作用域的顶层，</span>
<span class="token comment">// 这意味着我们的例子可以改写成这样：</span>
<span class="token keyword">function</span> <span class="token function">example</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> declaredButNotAssigned<span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>declaredButNotAssigned<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// =&gt; undefined</span>
  declaredButNotAssigned <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 使用 const 和 let</span>
<span class="token keyword">function</span> <span class="token function">example</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>declaredButNotAssigned<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// =&gt; throws a ReferenceError</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> declaredButNotAssigned<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// =&gt; throws a ReferenceError</span>
  <span class="token keyword">const</span> declaredButNotAssigned <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li><li><p><a href="#14.2">14.2</a> <a name="14.2"></a> 匿名函数表达式的变量名会被提升，但函数内容并不会。</p><div class="language-javascript"><pre><code><span class="token keyword">function</span> <span class="token function">example</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>anonymous<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// =&gt; undefined</span>

  <span class="token function">anonymous</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// =&gt; TypeError anonymous is not a function</span>

  <span class="token keyword">var</span> <span class="token function-variable function">anonymous</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;anonymous function expression&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li><li><p><a href="#14.3">14.3</a> <a name="14.3"></a> 命名的函数表达式的变量名会被提升，但函数名和函数函数内容并不会。</p><div class="language-javascript"><pre><code><span class="token keyword">function</span> <span class="token function">example</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>named<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// =&gt; undefined</span>

  <span class="token function">named</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// =&gt; TypeError named is not a function</span>

  <span class="token function">superPower</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// =&gt; ReferenceError superPower is not defined</span>

  <span class="token keyword">var</span> <span class="token function-variable function">named</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">superPower</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;Flying&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// the same is true when the function name</span>
<span class="token comment">// is the same as the variable name.</span>
<span class="token keyword">function</span> <span class="token function">example</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>named<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// =&gt; undefined</span>

  <span class="token function">named</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// =&gt; TypeError named is not a function</span>

  <span class="token keyword">var</span> <span class="token function-variable function">named</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">named</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;named&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div></li><li><p><a href="#14.4">14.4</a> <a name="14.4"></a> 函数声明的名称和函数体都会被提升。</p><div class="language-javascript"><pre><code><span class="token keyword">function</span> <span class="token function">example</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">superPower</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// =&gt; Flying</span>

  <span class="token keyword">function</span> <span class="token function">superPower</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;Flying&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div></li><li><p>想了解更多信息，参考 <a href="http://www.adequatelygood.com/" target="_blank" rel="noopener noreferrer">Ben Cherry</a> 的 <a href="http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting" target="_blank" rel="noopener noreferrer">JavaScript Scoping &amp; Hoisting</a>。</p></li></ul><p><a name="comparison-operators--equality"></a></p><h2 id="比较运算符和等号"><a class="header-anchor" href="#比较运算符和等号" aria-hidden="true">#</a> 比较运算符和等号</h2><ul><li><p><a href="#15.1">15.1</a> <a name="15.1"></a> 优先使用 <code>===</code> 和 <code>!==</code> 而不是 <code>==</code> 和 <code>!=</code>.</p></li><li><p><a href="#15.2">15.2</a> <a name="15.2"></a> 条件表达式例如 <code>if</code> 语句通过抽象方法 <code>ToBoolean</code> 强制计算它们的表达式并且总是遵守下面的规则：</p><ul><li><strong>对象</strong> 被计算为 <strong>true</strong></li><li><strong>Undefined</strong> 被计算为 <strong>false</strong></li><li><strong>Null</strong> 被计算为 <strong>false</strong></li><li><strong>布尔值</strong> 被计算为 <strong>布尔的值</strong></li><li><strong>数字</strong> 如果是 <strong>+0、-0、或 NaN</strong> 被计算为 <strong>false</strong>, 否则为 <strong>true</strong></li><li><strong>字符串</strong> 如果是空字符串 <code>&#39;&#39;</code> 被计算为 <strong>false</strong>，否则为 <strong>true</strong></li></ul><div class="language-javascript"><pre><code><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// true</span>
  <span class="token comment">// An array is an object, objects evaluate to true</span>
<span class="token punctuation">}</span>
</code></pre></div></li><li><p><a href="#15.3">15.3</a> <a name="15.3"></a> 使用简写。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>name <span class="token operator">!==</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...stuff...</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>name<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...stuff...</span>
<span class="token punctuation">}</span>

<span class="token comment">// bad</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>collection<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...stuff...</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>collection<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...stuff...</span>
<span class="token punctuation">}</span>
</code></pre></div></li><li><p><a href="#15.4">15.4</a> <a name="15.4"></a> 想了解更多信息，参考 Angus Croll 的 <a href="http://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/#more-2108" target="_blank" rel="noopener noreferrer">Truth Equality and JavaScript</a>。</p></li></ul><p><a name="blocks"></a></p><h2 id="代码块"><a class="header-anchor" href="#代码块" aria-hidden="true">#</a> 代码块</h2><ul><li><p><a href="#16.1">16.1</a> <a name="16.1"></a> 使用大括号包裹所有的多行代码块。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>test<span class="token punctuation">)</span>
  <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>test<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>test<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// bad</span>
<span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li><li><p><a href="#16.2">16.2</a> <a name="16.2"></a> 如果通过 <code>if</code> 和 <code>else</code> 使用多行代码块，把 <code>else</code> 放在 <code>if</code> 代码块关闭括号的同一行。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>test<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">thing1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token function">thing2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">else</span> <span class="token punctuation">{</span>
  <span class="token function">thing3</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>test<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">thing1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token function">thing2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
  <span class="token function">thing3</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ul><p><a name="comments"></a></p><h2 id="注释"><a class="header-anchor" href="#注释" aria-hidden="true">#</a> 注释</h2><ul><li><p><a href="#17.1">17.1</a> <a name="17.1"></a> 使用 <code>/** ... */</code> 作为多行注释。包含描述、指定所有参数和返回值的类型和值。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token comment">// make() returns a new element</span>
<span class="token comment">// based on the passed in tag name</span>
<span class="token comment">//</span>
<span class="token comment">// @param {String} tag</span>
<span class="token comment">// @return {Element} element</span>
<span class="token keyword">function</span> <span class="token function">make</span><span class="token punctuation">(</span><span class="token parameter">tag</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

  <span class="token comment">// ...stuff...</span>

  <span class="token keyword">return</span> element<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token comment">/**
 * make() returns a new element
 * based on the passed in tag name
 *
 * @param {String} tag
 * @return {Element} element
 */</span>
<span class="token keyword">function</span> <span class="token function">make</span><span class="token punctuation">(</span><span class="token parameter">tag</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

  <span class="token comment">// ...stuff...</span>

  <span class="token keyword">return</span> element<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li><li><p><a href="#17.2">17.2</a> <a name="17.2"></a> 使用 <code>//</code> 作为单行注释。在评论对象上面另起一行使用单行注释。在注释前插入空行。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> active <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>  <span class="token comment">// is current tab</span>

<span class="token comment">// good</span>
<span class="token comment">// is current tab</span>
<span class="token keyword">const</span> active <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>

<span class="token comment">// bad</span>
<span class="token keyword">function</span> <span class="token function">getType</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;fetching type...&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">// set the default type to &#39;no type&#39;</span>
  <span class="token keyword">const</span> type <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_type <span class="token operator">||</span> <span class="token string">&#39;no type&#39;</span><span class="token punctuation">;</span>

  <span class="token keyword">return</span> type<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">function</span> <span class="token function">getType</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;fetching type...&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">// set the default type to &#39;no type&#39;</span>
  <span class="token keyword">const</span> type <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_type <span class="token operator">||</span> <span class="token string">&#39;no type&#39;</span><span class="token punctuation">;</span>

  <span class="token keyword">return</span> type<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li><li><p><a href="#17.3">17.3</a> <a name="17.3"></a> 给注释增加 <code>FIXME</code> 或 <code>TODO</code> 的前缀可以帮助其他开发者快速了解这是一个需要复查的问题，或是给需要实现的功能提供一个解决方式。这将有别于常见的注释，因为它们是可操作的。使用 <code>FIXME -- need to figure this out</code> 或者 <code>TODO -- need to implement</code>。</p></li><li><p><a href="#17.4">17.4</a> <a name="17.4"></a> 使用 <code>// FIXME</code>: 标注问题。</p><div class="language-javascript"><pre><code><span class="token keyword">class</span> <span class="token class-name">Calculator</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// FIXME: shouldn&#39;t use a global here</span>
    total <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div></li><li><p><a href="#17.5">17.5</a> <a name="17.5"></a> 使用 <code>// TODO</code>: 标注问题的解决方式。</p><div class="language-javascript"><pre><code><span class="token keyword">class</span> <span class="token class-name">Calculator</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// TODO: total should be configurable by an options param</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>total <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ul><p><a name="whitespace"></a></p><h2 id="空白"><a class="header-anchor" href="#空白" aria-hidden="true">#</a> 空白</h2><ul><li><p><a href="#18.1">18.1</a> <a name="18.1"></a> 使用 2 个空格作为缩进。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
∙∙∙∙<span class="token keyword">const</span> name<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// bad</span>
<span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
∙<span class="token keyword">const</span> name<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
∙∙<span class="token keyword">const</span> name<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li><li><p><a href="#18.2">18.2</a> <a name="18.2"></a> 在花括号前放一个空格。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;test&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;test&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// bad</span>
dog<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">&#39;attr&#39;</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
  age<span class="token operator">:</span> <span class="token string">&#39;1 year&#39;</span><span class="token punctuation">,</span>
  breed<span class="token operator">:</span> <span class="token string">&#39;Bernese Mountain Dog&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
dog<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">&#39;attr&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  age<span class="token operator">:</span> <span class="token string">&#39;1 year&#39;</span><span class="token punctuation">,</span>
  breed<span class="token operator">:</span> <span class="token string">&#39;Bernese Mountain Dog&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#18.3">18.3</a> <a name="18.3"></a> 在控制语句（<code>if</code>、<code>while</code> 等）的小括号前放一个空格。在函数调用及声明中，不在函数的参数列表前加空格。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>isJedi<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">fight</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>isJedi<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">fight</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// bad</span>
<span class="token keyword">function</span> <span class="token function">fight</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span> <span class="token punctuation">(</span><span class="token string">&#39;Swooosh!&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">function</span> <span class="token function">fight</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;Swooosh!&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li><li><p><a href="#18.4">18.4</a> <a name="18.4"></a> 使用空格把运算符隔开。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> x<span class="token operator">=</span>y<span class="token operator">+</span><span class="token number">5</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> x <span class="token operator">=</span> y <span class="token operator">+</span> <span class="token number">5</span><span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#18.5">18.5</a> <a name="18.5"></a> 在文件末尾插入一个空行。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">global</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...stuff...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">global</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...stuff...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>↵
↵
</code></pre></div><div class="language-javascript"><pre><code><span class="token comment">// good</span>
<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">global</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...stuff...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>↵
</code></pre></div></li><li><p><a href="#18.5">18.5</a> <a name="18.5"></a> 在使用长方法链时进行缩进。使用前面的点 <code>.</code> 强调这是方法调用而不是新语句。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&#39;#items&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">&#39;.selected&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">highlight</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">&#39;.open&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">updateCount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// bad</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&#39;#items&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>
  <span class="token function">find</span><span class="token punctuation">(</span><span class="token string">&#39;.selected&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>
    <span class="token function">highlight</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>
    <span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>
  <span class="token function">find</span><span class="token punctuation">(</span><span class="token string">&#39;.open&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>
    <span class="token function">updateCount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&#39;#items&#39;</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">&#39;.selected&#39;</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">highlight</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">&#39;.open&#39;</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">updateCount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// bad</span>
<span class="token keyword">const</span> leds <span class="token operator">=</span> stage<span class="token punctuation">.</span><span class="token function">selectAll</span><span class="token punctuation">(</span><span class="token string">&#39;.led&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">data</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">enter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&#39;svg:svg&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">class</span><span class="token punctuation">(</span><span class="token string">&#39;led&#39;</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">&#39;width&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>radius <span class="token operator">+</span> margin<span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&#39;svg:g&#39;</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">&#39;transform&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;translate(&#39;</span> <span class="token operator">+</span> <span class="token punctuation">(</span>radius <span class="token operator">+</span> margin<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&#39;,&#39;</span> <span class="token operator">+</span> <span class="token punctuation">(</span>radius <span class="token operator">+</span> margin<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&#39;)&#39;</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>tron<span class="token punctuation">.</span>led<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> leds <span class="token operator">=</span> stage<span class="token punctuation">.</span><span class="token function">selectAll</span><span class="token punctuation">(</span><span class="token string">&#39;.led&#39;</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">data</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">enter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&#39;svg:svg&#39;</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">classed</span><span class="token punctuation">(</span><span class="token string">&#39;led&#39;</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">&#39;width&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>radius <span class="token operator">+</span> margin<span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&#39;svg:g&#39;</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">&#39;transform&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;translate(&#39;</span> <span class="token operator">+</span> <span class="token punctuation">(</span>radius <span class="token operator">+</span> margin<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&#39;,&#39;</span> <span class="token operator">+</span> <span class="token punctuation">(</span>radius <span class="token operator">+</span> margin<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&#39;)&#39;</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>tron<span class="token punctuation">.</span>led<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#18.6">18.6</a> <a name="18.6"></a> 在块末和新语句前插入空行。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>foo<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> bar<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> baz<span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>foo<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> bar<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">return</span> baz<span class="token punctuation">;</span>

<span class="token comment">// bad</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">bar</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> obj<span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token function">bar</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">return</span> obj<span class="token punctuation">;</span>
</code></pre></div></li></ul><p><a name="commas"></a></p><h2 id="逗号"><a class="header-anchor" href="#逗号" aria-hidden="true">#</a> 逗号</h2><ul><li><p><a href="#19.1">19.1</a> <a name="19.1"></a> 行首逗号：<strong>不需要</strong>。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> story <span class="token operator">=</span> <span class="token punctuation">[</span>
    once
  <span class="token punctuation">,</span> upon
  <span class="token punctuation">,</span> aTime
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> story <span class="token operator">=</span> <span class="token punctuation">[</span>
  once<span class="token punctuation">,</span>
  upon<span class="token punctuation">,</span>
  aTime<span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">// bad</span>
<span class="token keyword">const</span> hero <span class="token operator">=</span> <span class="token punctuation">{</span>
    firstName<span class="token operator">:</span> <span class="token string">&#39;Ada&#39;</span>
  <span class="token punctuation">,</span> lastName<span class="token operator">:</span> <span class="token string">&#39;Lovelace&#39;</span>
  <span class="token punctuation">,</span> birthYear<span class="token operator">:</span> <span class="token number">1815</span>
  <span class="token punctuation">,</span> superPower<span class="token operator">:</span> <span class="token string">&#39;computers&#39;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> hero <span class="token operator">=</span> <span class="token punctuation">{</span>
  firstName<span class="token operator">:</span> <span class="token string">&#39;Ada&#39;</span><span class="token punctuation">,</span>
  lastName<span class="token operator">:</span> <span class="token string">&#39;Lovelace&#39;</span><span class="token punctuation">,</span>
  birthYear<span class="token operator">:</span> <span class="token number">1815</span><span class="token punctuation">,</span>
  superPower<span class="token operator">:</span> <span class="token string">&#39;computers&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#19.2">19.2</a> <a name="19.2"></a> 增加结尾的逗号: <strong>需要</strong>。</p><blockquote><p>为什么? 这会让 git diffs 更干净。另外，像 babel 这样的转译器会移除结尾多余的逗号，也就是说你不必担心老旧浏览器的[尾逗号问题]。</p></blockquote><div class="language-javascript"><pre><code><span class="token comment">// bad - git diff without trailing comma</span>
<span class="token keyword">const</span> hero <span class="token operator">=</span> <span class="token punctuation">{</span>
     firstName<span class="token operator">:</span> <span class="token string">&#39;Florence&#39;</span><span class="token punctuation">,</span>
<span class="token operator">-</span>    lastName<span class="token operator">:</span> <span class="token string">&#39;Nightingale&#39;</span>
<span class="token operator">+</span>    lastName<span class="token operator">:</span> <span class="token string">&#39;Nightingale&#39;</span><span class="token punctuation">,</span>
<span class="token operator">+</span>    inventorOf<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;coxcomb graph&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;modern nursing&#39;</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>

<span class="token comment">// good - git diff with trailing comma</span>
<span class="token keyword">const</span> hero <span class="token operator">=</span> <span class="token punctuation">{</span>
     firstName<span class="token operator">:</span> <span class="token string">&#39;Florence&#39;</span><span class="token punctuation">,</span>
     lastName<span class="token operator">:</span> <span class="token string">&#39;Nightingale&#39;</span><span class="token punctuation">,</span>
<span class="token operator">+</span>    inventorOf<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;coxcomb chart&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;modern nursing&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

<span class="token comment">// bad</span>
<span class="token keyword">const</span> hero <span class="token operator">=</span> <span class="token punctuation">{</span>
  firstName<span class="token operator">:</span> <span class="token string">&#39;Dana&#39;</span><span class="token punctuation">,</span>
  lastName<span class="token operator">:</span> <span class="token string">&#39;Scully&#39;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> heroes <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token string">&#39;Batman&#39;</span><span class="token punctuation">,</span>
  <span class="token string">&#39;Superman&#39;</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> hero <span class="token operator">=</span> <span class="token punctuation">{</span>
  firstName<span class="token operator">:</span> <span class="token string">&#39;Dana&#39;</span><span class="token punctuation">,</span>
  lastName<span class="token operator">:</span> <span class="token string">&#39;Scully&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> heroes <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token string">&#39;Batman&#39;</span><span class="token punctuation">,</span>
  <span class="token string">&#39;Superman&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre></div></li></ul><p><a name="semicolons"></a></p><h2 id="分号"><a class="header-anchor" href="#分号" aria-hidden="true">#</a> 分号</h2><ul><li><p><a href="#20.1">20.1</a> <a name="20.1"></a> <strong>使用分号</strong></p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">&#39;Skywalker&#39;</span>
  <span class="token keyword">return</span> name
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token comment">// good</span>
<span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">&#39;Skywalker&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> name<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// good (防止函数在两个 IIFE 合并时被当成一个参数)</span>
<span class="token punctuation">;</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">&#39;Skywalker&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> name<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><a href="http://stackoverflow.com/a/7365214/1712802" target="_blank" rel="noopener noreferrer">Read more</a>.</p></li></ul><p><a name="type-casting--coercion"></a></p><h2 id="类型转换"><a class="header-anchor" href="#类型转换" aria-hidden="true">#</a> 类型转换</h2><ul><li><p><a href="#21.1">21.1</a> <a name="21.1"></a> 在语句开始时执行类型转换。</p></li><li><p><a href="#21.2">21.2</a> <a name="21.2"></a> 字符串：</p><div class="language-javascript"><pre><code><span class="token comment">//  =&gt; this.reviewScore = 9;</span>

<span class="token comment">// bad</span>
<span class="token keyword">const</span> totalScore <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>reviewScore <span class="token operator">+</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> totalScore <span class="token operator">=</span> <span class="token function">String</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>reviewScore<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#21.3">21.3</a> <a name="21.3"></a> 对数字使用 <code>parseInt</code> 转换，并带上类型转换的基数。</p><div class="language-javascript"><pre><code><span class="token keyword">const</span> inputValue <span class="token operator">=</span> <span class="token string">&#39;4&#39;</span><span class="token punctuation">;</span>

<span class="token comment">// bad</span>
<span class="token keyword">const</span> val <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Number</span><span class="token punctuation">(</span>inputValue<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// bad</span>
<span class="token keyword">const</span> val <span class="token operator">=</span> <span class="token operator">+</span>inputValue<span class="token punctuation">;</span>

<span class="token comment">// bad</span>
<span class="token keyword">const</span> val <span class="token operator">=</span> inputValue <span class="token operator">&gt;&gt;</span> <span class="token number">0</span><span class="token punctuation">;</span>

<span class="token comment">// bad</span>
<span class="token keyword">const</span> val <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>inputValue<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> val <span class="token operator">=</span> <span class="token function">Number</span><span class="token punctuation">(</span>inputValue<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> val <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>inputValue<span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#21.4">21.4</a> <a name="21.4"></a> 如果因为某些原因 parseInt 成为你所做的事的瓶颈而需要使用位操作解决<a href="http://jsperf.com/coercion-vs-casting/3" target="_blank" rel="noopener noreferrer">性能问题</a>时，留个注释说清楚原因和你的目的。</p><div class="language-javascript"><pre><code><span class="token comment">// good</span>
<span class="token comment">/**
 * 使用 parseInt 导致我的程序变慢，
 * 改成使用位操作转换数字快多了。
 */</span>
<span class="token keyword">const</span> val <span class="token operator">=</span> inputValue <span class="token operator">&gt;&gt;</span> <span class="token number">0</span><span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#21.5">21.5</a> <a name="21.5"></a> <strong>注:</strong> 小心使用位操作运算符。数字会被当成 <a href="http://es5.github.io/#x4.3.19" target="_blank" rel="noopener noreferrer">64 位值</a>，但是位操作运算符总是返回 32 位的整数（<a href="http://es5.github.io/#x11.7" target="_blank" rel="noopener noreferrer">参考</a>）。位操作处理大于 32 位的整数值时还会导致意料之外的行为。最大的 32 位整数是 2,147,483,647：</p><div class="language-javascript"><pre><code><span class="token number">2147483647</span> <span class="token operator">&gt;&gt;</span> <span class="token number">0</span> <span class="token comment">//=&gt; 2147483647</span>
<span class="token number">2147483648</span> <span class="token operator">&gt;&gt;</span> <span class="token number">0</span> <span class="token comment">//=&gt; -2147483648</span>
<span class="token number">2147483649</span> <span class="token operator">&gt;&gt;</span> <span class="token number">0</span> <span class="token comment">//=&gt; -2147483647</span>
</code></pre></div></li><li><p><a href="#21.6">21.6</a> <a name="21.6"></a> 布尔:</p><div class="language-javascript"><pre><code><span class="token keyword">const</span> age <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>

<span class="token comment">// bad</span>
<span class="token keyword">const</span> hasAge <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Boolean</span><span class="token punctuation">(</span>age<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> hasAge <span class="token operator">=</span> <span class="token function">Boolean</span><span class="token punctuation">(</span>age<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> hasAge <span class="token operator">=</span> <span class="token operator">!</span><span class="token operator">!</span>age<span class="token punctuation">;</span>
</code></pre></div></li></ul><p><a name="naming-conventions"></a></p><h2 id="命名规则"><a class="header-anchor" href="#命名规则" aria-hidden="true">#</a> 命名规则</h2><ul><li><p><a href="#22.1">22.1</a> <a name="22.1"></a> 避免单字母命名。命名应具备描述性。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">function</span> <span class="token function">q</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...stuff...</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">function</span> <span class="token function">query</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ..stuff..</span>
<span class="token punctuation">}</span>
</code></pre></div></li><li><p><a href="#22.2">22.2</a> <a name="22.2"></a> 使用驼峰式命名对象、函数和实例。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> OBJEcttsssss <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> this_is_my_object <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">c</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> thisIsMyObject <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">thisIsMyFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</code></pre></div></li><li><p><a href="#22.3">22.3</a> <a name="22.3"></a> 使用帕斯卡式命名构造函数或类。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">function</span> <span class="token function">user</span><span class="token punctuation">(</span><span class="token parameter">options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> options<span class="token punctuation">.</span>name<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> bad <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">user</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">&#39;nope&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">class</span> <span class="token class-name">User</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> options<span class="token punctuation">.</span>name<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> good <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">User</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">&#39;yup&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#22.4">22.4</a> <a name="22.4"></a> 不要使用下划线 <code>_</code> 结尾或开头来命名属性和方法。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>__firstName__ <span class="token operator">=</span> <span class="token string">&#39;Panda&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>firstName_ <span class="token operator">=</span> <span class="token string">&#39;Panda&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>_firstName <span class="token operator">=</span> <span class="token string">&#39;Panda&#39;</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>firstName <span class="token operator">=</span> <span class="token string">&#39;Panda&#39;</span><span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#22.5">22.5</a> <a name="22.5"></a> 别保存 <code>this</code> 的引用。使用箭头函数或 Function#bind。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> self <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>self<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// bad</span>
<span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> that <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>that<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li><li><p><a href="#22.6">22.6</a> <a name="22.6"></a> 如果你的文件只输出一个类，那你的文件名必须和类名完全保持一致。</p><div class="language-javascript"><pre><code><span class="token comment">// file contents</span>
<span class="token keyword">class</span> <span class="token class-name">CheckBox</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> CheckBox<span class="token punctuation">;</span>

<span class="token comment">// in some other file</span>
<span class="token comment">// bad</span>
<span class="token keyword">import</span> CheckBox <span class="token keyword">from</span> <span class="token string">&#39;./checkBox&#39;</span><span class="token punctuation">;</span>

<span class="token comment">// bad</span>
<span class="token keyword">import</span> CheckBox <span class="token keyword">from</span> <span class="token string">&#39;./check_box&#39;</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">import</span> CheckBox <span class="token keyword">from</span> <span class="token string">&#39;./CheckBox&#39;</span><span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#22.7">22.7</a> <a name="22.7"></a> 当你导出默认的函数时使用驼峰式命名。你的文件名必须和函数名完全保持一致。</p><div class="language-javascript"><pre><code><span class="token keyword">function</span> <span class="token function">makeStyleGuide</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> makeStyleGuide<span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#22.8">22.8</a> <a name="22.8"></a> 当你导出单例、函数库、空对象时使用帕斯卡式命名。</p><div class="language-javascript"><pre><code><span class="token keyword">const</span> AirbnbStyleGuide <span class="token operator">=</span> <span class="token punctuation">{</span>
  es6<span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> AirbnbStyleGuide<span class="token punctuation">;</span>
</code></pre></div></li></ul><p><a name="accessors"></a></p><h2 id="存取器"><a class="header-anchor" href="#存取器" aria-hidden="true">#</a> 存取器</h2><ul><li><p><a href="#23.1">23.1</a> <a name="23.1"></a> 属性的存取函数不是必须的。</p></li><li><p><a href="#23.2">23.2</a> <a name="23.2"></a> 如果你需要存取函数时使用 <code>getVal()</code> 和 <code>setVal(&#39;hello&#39;)</code>。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
dragon<span class="token punctuation">.</span><span class="token function">age</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
dragon<span class="token punctuation">.</span><span class="token function">getAge</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// bad</span>
dragon<span class="token punctuation">.</span><span class="token function">age</span><span class="token punctuation">(</span><span class="token number">25</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
dragon<span class="token punctuation">.</span><span class="token function">setAge</span><span class="token punctuation">(</span><span class="token number">25</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#23.3">23.3</a> <a name="23.3"></a> 如果属性是布尔值，使用 <code>isVal()</code> 或 <code>hasVal()</code>。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>dragon<span class="token punctuation">.</span><span class="token function">age</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>dragon<span class="token punctuation">.</span><span class="token function">hasAge</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li><li><p><a href="#23.4">23.4</a> <a name="23.4"></a> 创建 <code>get()</code> 和 <code>set()</code> 函数是可以的，但要保持一致。</p><div class="language-javascript"><pre><code><span class="token keyword">class</span> <span class="token class-name">Jedi</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">options <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> lightsaber <span class="token operator">=</span> options<span class="token punctuation">.</span>lightsaber <span class="token operator">||</span> <span class="token string">&#39;blue&#39;</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">&#39;lightsaber&#39;</span><span class="token punctuation">,</span> lightsaber<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">set</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> val<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> val<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">get</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ul><p><a name="events"></a></p><h2 id="事件"><a class="header-anchor" href="#事件" aria-hidden="true">#</a> 事件</h2><ul><li><p><a href="#24.1">24.1</a> <a name="24.1"></a> 当给事件附加数据时（无论是 DOM 事件还是私有事件），传入一个哈希而不是原始值。这样可以让后面的贡献者增加更多数据到事件数据而无需找出并更新事件的每一个处理器。例如，不好的写法：</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">trigger</span><span class="token punctuation">(</span><span class="token string">&#39;listingUpdated&#39;</span><span class="token punctuation">,</span> listing<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token operator">...</span>

<span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;listingUpdated&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">,</span> listingId</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// do something with listingId</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>更好的写法：</p><div class="language-javascript"><pre><code><span class="token comment">// good</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">trigger</span><span class="token punctuation">(</span><span class="token string">&#39;listingUpdated&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> listingId <span class="token operator">:</span> listing<span class="token punctuation">.</span>id <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token operator">...</span>

<span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;listingUpdated&#39;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// do something with data.listingId</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li></ul><h2 id="jquery"><a class="header-anchor" href="#jquery" aria-hidden="true">#</a> jQuery</h2><ul><li><p><a href="#25.1">25.1</a> <a name="25.1"></a> 使用 <code>$</code> 作为存储 jQuery 对象的变量名前缀。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> sidebar <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&#39;.sidebar&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> $sidebar <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&#39;.sidebar&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li><li><p><a href="#25.2">25.2</a> <a name="25.2"></a> 缓存 jQuery 查询。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token keyword">function</span> <span class="token function">setSidebar</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&#39;.sidebar&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">// ...stuff...</span>

  <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&#39;.sidebar&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token string">&#39;background-color&#39;</span><span class="token operator">:</span> <span class="token string">&#39;pink&#39;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">function</span> <span class="token function">setSidebar</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> $sidebar <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&#39;.sidebar&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  $sidebar<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">// ...stuff...</span>

  $sidebar<span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token string">&#39;background-color&#39;</span><span class="token operator">:</span> <span class="token string">&#39;pink&#39;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li><li><p><a href="#25.3">25.3</a> <a name="25.3"></a> 对 DOM 查询使用层叠 <code>$(&#39;.sidebar ul&#39;)</code> 或 父元素 &gt; 子元素 <code>$(&#39;.sidebar &gt; ul&#39;)</code>。 <a href="http://jsperf.com/jquery-find-vs-context-sel/16" target="_blank" rel="noopener noreferrer">jsPerf</a></p></li><li><p><a href="#25.4">25.4</a> <a name="25.4"></a> 对有作用域的 jQuery 对象查询使用 <code>find</code>。</p><div class="language-javascript"><pre><code><span class="token comment">// bad</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&#39;ul&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;.sidebar&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// bad</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&#39;.sidebar&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">&#39;ul&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&#39;.sidebar ul&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&#39;.sidebar &gt; ul&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
$sidebar<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">&#39;ul&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li></ul><p><a name="ecmascript-6-styles"></a></p><h2 id="ecmascript-6-规范"><a class="header-anchor" href="#ecmascript-6-规范" aria-hidden="true">#</a> ECMAScript 6 规范</h2><ul><li><a href="#27.1">25.5</a> <a name="27.1"></a> 以下是链接到 ES6 各个特性的列表。</li></ul><ol><li><a href="#arrow-functions">箭头函数</a></li><li><a href="#constructors">类</a></li><li><a href="#es6-object-shorthand">对象方法简写</a></li><li><a href="#es6-object-concise">对象属性简写</a></li><li><a href="#es6-computed-properties">对象中的可计算属性</a></li><li><a href="#es6-template-literals">模板字符串</a></li><li><a href="#destructuring">解构</a></li><li><a href="#es6-default-parameters">默认参数</a></li><li><a href="#es6-rest">Rest</a></li><li><a href="#es6-array-spreads">数组 Spreads</a></li><li><a href="#references">Let 及 Const</a></li><li><a href="#iterators-and-generators">迭代器和生成器</a></li><li><a href="#modules">模块</a></li></ol></div></div><footer class="page-footer" data-v-4c107763 data-v-ddc19c16><div class="edit" data-v-ddc19c16><div class="edit-link" data-v-ddc19c16 data-v-5c10c4bc><!----></div></div><div class="updated" data-v-ddc19c16><!----></div></footer><div class="next-and-prev-link" data-v-4c107763 data-v-0002a634><div class="container" data-v-0002a634><div class="prev" data-v-0002a634><!----></div><div class="next" data-v-0002a634><a class="link" href="/test/specification/Vue" data-v-0002a634><span class="text" data-v-0002a634>vue规范</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-0002a634><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--]--></div></main></div><!----><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"index.md\":\"4e115ee3\",\"readme.md\":\"29234daa\",\"components_introduction.md\":\"44282a5e\",\"error_component.md\":\"fb89350e\",\"guide_introduction.md\":\"1dc92eff\",\"specification_gitfenzhi.md\":\"95918a05\",\"specification_javascript.md\":\"eabf491e\",\"specification_others.md\":\"c6e73694\",\"specification_vue.md\":\"ec62d92c\",\"components_uni-app_waterlist.md\":\"19ee5089\",\"components_vue3_button.md\":\"0794f010\",\"components_vue3_layout.md\":\"408bfad0\",\"comprehension_datas_number.md\":\"b616f9c2\",\"comprehension_datas_string.md\":\"f2247365\",\"comprehension_tools_toolslibrary.md\":\"8b9638a4\",\"error_errorlist_踩坑合集.md\":\"8a36011b\",\"error_mp_uniapp.md\":\"e38481a1\",\"project_customer-app_introduction.md\":\"bfeabf6e\",\"project_erp3_introduction.md\":\"4d6d2c14\",\"project_finical_introduction.md\":\"51ef0fa6\",\"project_food-safety_introduction.md\":\"320e7cd1\",\"project_supplier-app_introduction.md\":\"78907d59\",\"project_tally-app_introduction.md\":\"a25b274f\",\"schemecollection_scheme_schemelibrary.md\":\"964e9557\",\"project_finical_scheme_dimensional.md\":\"f62a7e4b\",\"project_food-safety_demand-dynamics_details.md\":\"8efde325\",\"project_food-safety_other_details.md\":\"4c1a00ef\",\"project_erp3_scheme_basicupload_basicupload.md\":\"4fead758\"}")</script>
    <script type="module" async src="/test/assets/app.8d0a65ca.js"></script>
  </body>
</html>